<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no, viewport-fit=cover" />
    <title>预约订单</title>
</head>
<link rel="stylesheet" type="text/css" href="css/public.css" />
<style>
    　* {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0
    }

    ul,
    li {
        list-style: none;
    }

    a {
        text-decoration: none;
    }

    a:hover {
        cursor: pointer;
        text-decoration: none;
    }

    a:link {
        text-decoration: none;
    }

    img {
        vertical-align: middle;
    }

    .btn-numbox {
        overflow: hidden;
        margin-top: 20px;
    }

    .btn-numbox li {
        float: left;
    }

    .btn-numbox li .number,
    .kucun {
        display: inline-block;
        font-size: 12px;
        color: #808080;
        vertical-align: sub;
    }

    .btn-numbox .count {
        overflow: hidden;
        margin: 0 16px 0 -20px;
    }

    .btn-numbox .count .num-jian,
    .input-num,
    .num-jia {
        display: inline-block;
        width: 28px;
        height: 28px;
        line-height: 28px;
        text-align: center;
        font-size: 18px;
        color: #999;
        cursor: pointer;
        border: 1px solid #e6e6e6;
    }
    .btn-numbox .count .input-num {
        width: 58px;
        height: 26px;
        color: #333;
        border-left: 0;
        border-right: 0;
    }

</style>
<script src="js/jquery1.42.min.js"></script>
<body class="appoint-order">

<!--表单-->
　　　<ul class="btn-numbox">
        <li><span class="number">数量</span></li>
        <li>
            <ul class="count">
                <li><span id="minus" class="num-jian">-</span></li>
                <li><input type="text" class="input-num" id="inputNum" value="0" /></li>
                <li><span id="plus" class="num-jia">+</span></li>
            </ul>
        </li>
        <li><span class="kucun">（库存:<i id="total">5</i>）</span></li>
    　</ul>

        <script type="text/javascript">
            $(function(){
                var t = $('#inputNum');/*  数量显示框*/
                $('#plus').click(function(){
                    if(t.val()<$('#total').text()){/* 数量最大不能超过商品库存量 */
                        t.val(parseInt(t.val())+1);
                    }else{
                        t.val($('#total').text());
                    }
                    t.change() ;
                })
                $('#minus').click(function(){
                    if(t.val()<=1){	/*数量最少为1  */
                        t.val(1);
                    }else{
                        t.val(parseInt(t.val())-1);
                    }
                    t.change()
                })
            });
    </script>
</body>